import React from "react";
import PropTypes from "prop-types";
import {WingBlank, WhiteSpace, Card} from "antd-mobile";
import {withRouter} from "react-router-dom";

@withRouter
class UserCard extends React.Component {
  static defaultProps = {
    userList: PropTypes.array.required
  };

  chatWithUser (userId) {
    this.props.history.push(`/chat/${userId}`);
  }

  render () {
    const CardHeader = Card.Header,
      CardBody = Card.Body;
    return (
      <WingBlank>
        {
          this.props.userList.map(u => {
            return u.avatar ? (
              <div key={u.username}>
                <WhiteSpace/>
                <Card onClick={() => this.chatWithUser(u._id)}>
                  <CardHeader title={u.username}
                              thumb={require(`./img/${u.avatar}.png`)}
                              extra={<span>{u.job}</span>}/>
                  <CardBody>
                    <div>{u.role === "boss" ? `公司:${u.company}` : ""}</div>
                    <div>{u.role === "boss" ? `职位要求:${u.desc}` : `自我评价:${u.desc}`}</div>
                    <div>{u.role === "boss" ? `薪资范围:${u.salary}` : `薪资要求:${u.salary}`}</div>
                  </CardBody>
                </Card>
              </div>
            ) : null;
          })
        }
      </WingBlank>
    );
  }
}

export default UserCard;